<template>
  <view>
    <view
      class="scroll-content"
      :style="{
        transition: `transform ${duration}s ease-in-out;`,
        transform: `translateY(-${step * 10 * currentStep}%)`,
      }"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    step: {
      type: Number,
      default: 1,
    },
    duration: {
      type: Number,
      default: 0.2,
    },
    interval: {
      type: Number,
      default: 2000,
    },
    total: {
      type: Number,
      default: 8,
    },
  },
  data() {
    return {
      scrollInterval: null,
      currentStep: 0,
    };
  },
  methods: {
    startScrolling() {
      this.scrollInterval = setInterval(() => {
        if (this.currentStep === this.total) {
          this.currentStep = 0;
        } else {
          this.currentStep += 1;
        }
      }, this.interval);
    },
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    clearInterval(this.scrollInterval);
  },
};
</script>

<style lang="scss" scoped></style>
